<template>
    <div class="app-container">
        <van-nav-bar title="加入我们"  left-arrow @click-left="handleBack" />
        <div class="join-container">
            <div class="history-title">关注公众号：惊鸿量化研习社<span style="margin-left: 10px;" data-clipboard-text="惊鸿量化研习社"  id="copyUrl" class="maincolor">复制</span></div>
            <div class="history-title">注：公众号是收费的，但是大家进交流群私聊群主，群主开通免费量化信号体验</div>
            <!-- <van-button class="btn-ai"  type="primary" size="small" native-type="submit" @click="$router.push('/inviteweex')">招募weex带单员</van-button> -->


            <div class="refresh mt20">
                <van-button class="mb10" block type="primary" size="small" native-type="submit" @click="handleRefresh">刷新二维码</van-button>

                <van-image
                    class="pic"
                    width="100%"
                    @click="handlepreview(0)"
                    :src="images[0]"
                />
                <!-- <img class="pic" :src="src" alt=""> -->
            </div>
        </div>
    

    </div>
</template>

<script>
import ClipboardJS from 'clipboard';
import { showToast, showSuccessToast } from 'vant';
import { showImagePreview } from 'vant';
// import { toHandlers } from 'vue';

// const buildQueryStr = (str, query = {}) => {
//     const queryList = Object.entries(query);

//     if (queryList.length) {

//         str = queryList.reduce((str, curr) => {
//             if (curr[1] !== null && curr[1] !== undefined) {
//                 str += `${curr[0]}=${curr[1]}&`;
//             }

//             return str;
//         }, str += '?');

//         if (str.endsWith('?') || str.endsWith('&')) {
//             str = str.substring(0, str.length - 1);
//         }
//     }

//     return str;
// };
export default {
    name: 'aisilent',
    props: {},
    data() {
        return {
            images: [
                'https://www.aiaabiok.com/imgs/wx-free-group.jpg',
            ],
            src: '',
            // src: 'https://www.aiaabiok.com/imgs/wx20240228.png'
            // src: 'https://www.aiaabiok.com/imgs/wx/01.png',
            // src2: 'https://www.aiaabiok.com/imgs/wx/02.png',
        };
    },
    components: { },
    created() {
        this.setCopy();
        this.src = this.images[0];
    },
    computed: {},
    methods: {
        handlepreview(index) {
            showImagePreview({
                images: this.images,
                startPosition: index,
                closeable: true,
            });
        },
        setCopy() {
            let clipborad = new ClipboardJS('#copyUrl');
            //复制成功
            clipborad.on('success', function () {
                showSuccessToast('复制成功');
            });
            //复制失败
            clipborad.on('error', function () {
                showToast('复制失败');
            });
        },
        handleBack() {
            this.$router.push('/login');
        },
        handleRefresh() {
            this.images[0] = this.src + `?t=${new Date().getTime()}`
        },
        
    },
};
</script>
<style lang="less" scoped>
.pic {
    width: 100%;
    max-width: 600px
}
.join-container {
    padding: 16px;
}
.btn-ai {
    margin-top: 20px;
}
.ai-desc {
    font-size: 12px;
    color: #333;
    p {
        line-height: 26px;
    }
}
.img-desc {
    font-size: 14px;
    color: #666;
    margin: 10px 0;
}
.pic {
    max-width: 100%;
}
.history-title {
    font-size: 14px;
}
</style>
